<template>
  <view class="news-item" @click="handleClick">
    <image 
      class="news-image" 
      :src="news.image || 'https://ai-public.mastergo.com/ai/img_res/2e6365fd38f8ad0b60af22c2acf9637c.jpg'" 
      mode="aspectFill"
    ></image>
    <view class="news-info">
      <text class="news-title">{{ news.title }}</text>
      <text class="news-desc">{{ news.description }}</text>
      <view class="news-meta">
        <text class="news-date">{{ news.time }}</text>
        <text class="news-views">{{ news.views }}阅读</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
interface NewsItem {
  id: number;
  title: string;
  description: string;
  time: string;
  views: string;
  image: string | null;
}

const props = defineProps<{
  news: NewsItem;
}>();

const emit = defineEmits(['click']);

const handleClick = () => {
  emit('click', props.news);
};
</script>

<style>
.news-item {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.news-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin: 8rpx 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
}

.news-date {
  font-size: 12px;
  color: #999;
}

.news-views {
  font-size: 12px;
  color: #999;
  margin-left: 24rpx;
}
</style> 